﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>myResume</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0"/>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
    <!-- 第三方样式文件-->
    <link rel="stylesheet" href="./lib/bootstarp/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="./lib/animate.min.css"/>
    <!-- base -->
    <link rel="stylesheet" href="./css/base.css">
    <!--自己的样式文件-->
    <link rel="stylesheet" href="./css/index.css">
    <!--兼容 ie8不支持h5以及媒体查询-->
    <!--[if lt IE 9]>
    <script src="lib/html5shiv/html5shiv.min.js"></script>
    <script src="lib/respond/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="layout">
    <header class="header">
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header" aria-expanded="false">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">冯占洋</a>
                </div>
                <div class="collapse navbar-collapse" id="header">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="javascript:;" class="link_one">首页</a></li>
                        <li><a href="javascript:;" class="link_two">专业技能</a></li>
                        <li><a href="javascript:;" class="link_three">项目展示</a></li>
                        <li><a href="javascript:;" class="link_four">个人经历</a></li>
                        <li><a href="javascript:;" class="link_five">联系方式</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </header>
    <section class="main">
        <div class="section section1">
            <div id="particles-js"></div>
            <div class="container">
                <div class="col-xs-12 col-sm-6">
                    <div class="wow zoomIn pic" >
                        <img src="./images/page1_1.png" alt=""/>
                    </div>
                </div>
                <div class="wow fadeInDown txt col-xs-12 col-sm-6" data-wow-duration="2s">
                    <h3 class="bounceInDown">Hi, This is </h3>
                    <h3 class="bounceInDown">Felix's Resume</h3>
                </div>
                <div class="info col-xs-12">
                    <div class="wow zoomIn topLine" data-wow-duration="2s"></div>
                    <p class="wow fadeInUp" data-wow-delay=".5s">我叫冯占洋</p>
                    <p class="wow fadeInUp" data-wow-delay=".7s">25岁</p>
                    <p class="wow fadeInUp" data-wow-delay=".9s">一名前端开发工程师</p>
                </div>
            </div>
        </div>
        <div class="section section2">
            <h3 class="wow fadeInDown tittle">专业技能</h3>
            <div class="container">
                <div class="col-sm-6 col-sm-12">
                    <div class="skill">
                        <div class="icon_html  skill-middle">
                        </div>
                        <div class="skill-body">
                            <h4 class="skill-heading">HTML(5)</h4>
                            熟悉HTML5新标准及CSS3新属性，可熟练运用HTML5和CSS3技术开发移动端页面
                        </div>
                    </div>
                    <div class="skill">
                        <div class="icon_css  skill-middle">
                        </div>
                        <div class="skill-body">
                            <h4 class="skill-heading">CSS(3)</h4>
                            熟悉HTML5新标准及CSS3新属性，可熟练运用HTML5和CSS3技术开发移动端页面
                        </div>
                    </div>
                    <div class="skill">
                        <div class="icon-angular  skill-middle">
                        </div>
                        <div class="skill-body">
                            <h4 class="skill-heading">AngularJS</h4>
                            能够借助Angular框架进行前后端分离多人协同开发以及SPA应用开发
                        </div>
                    </div>
                    <div class="skill">
                        <div class="icon-nodejs  skill-middle">
                        </div>
                        <div class="skill-body">
                            <h4 class="skill-heading">NodeJS</h4>
                            了解Node.js，可以运用express搭建Node.js服务器
                        </div>
                    </div>
                    <div class="skill">
                        <div class="icon-bootstrap  skill-middle">
                        </div>
                        <div class="skill-body">
                            <h4 class="skill-heading">BootStrap</h4>
                            熟练运用bootstrap框架开发响应式布局
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-sm-12">
                    <div class="skill">
                        <div class="icon_gulp  skill-middle"></div>
                        <div class="skill-body">
                            <h4 class="skill-heading">Gulp</h4>
                            熟练使用gulp前端自动化构建工具，良好的协同开发能力
                        </div>
                    </div>
                    <div class="skill">
                        <div class="icon_less  skill-middle"></div>
                        <div class="skill-body">
                            <h4 class="skill-heading">Less</h4>
                            掌握Less预编译技术，可利用Less快速编写CSS样式
                        </div>
                    </div>
                    <div class="skill">
                        <div class="icon_Git  skill-middle"></div>
                        <div class="skill-body">
                            <h4 class="skill-heading">Git</h4>
                            熟练使用Git版本控制工具
                        </div>
                    </div>
                    <div class="skill">
                        <div class="icon_SVN  skill-middle"></div>
                        <div class="skill-body">
                            <h4 class="skill-heading">SVN</h4>
                            熟练使用SVN版本控制工具
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="section section3">
            <h3 class="wow fadeInDown tittle">项目展示</h3>
            <div class="container">
                <div class="col-xs-12 col-sm-4 col-md-3">
                    <div class="top">
                        <a href="prac/app/index.html" class="wow zoomIn" data-wow-delay=".2s">
                            <img src="./images/小Q截图-20170303195558.png" alt=""/>
                        </a>
                        <div class="mask">
                            <a href="prac/app/index.html">
                                <span class="glyphicon glyphicon-search"></span>
                            </a>
                            <h5>
                                AngularJS
                            </h5>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-4 col-md-3">
                    <div class="top">
                        <a href="prac/myResume/index.html" class="wow zoomIn" data-wow-delay=".4s">
                            <img src="./images/小Q截图-20170303195558.png" alt=""/>
                        </a>
                        <div class="mask">
                            <a href="prac/myResume/index.html">
                                <span class="glyphicon glyphicon-search"></span>
                            </a>
                            <h5>
                                移动web
                            </h5>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-4 col-md-3">
                    <div class="top">
                        <a href="#" class="wow zoomIn" data-wow-delay=".6s">
                            <img src="./images/小Q截图-20170303195558.png" alt=""/>
                        </a>
                        <div class="mask">
                            <a href="#">
                                <span class="glyphicon glyphicon-search"></span>
                            </a>
                            <h5>
                                demo
                            </h5>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-4 col-md-3">
                    <div class="top">
                        <a href="#" class="wow zoomIn" data-wow-delay=".8s">
                            <img src="./images/小Q截图-20170303195558.png" alt=""/>
                        </a>
                        <div class="mask">
                            <a href="#">
                                <span class="glyphicon glyphicon-search"></span>
                            </a>
                            <h5>
                                demo
                            </h5>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-4 col-md-3">
                        <div class="top">
                            <a href="#" class="wow zoomIn" data-wow-delay=".9s">
                                <img src="./images/小Q截图-20170303195558.png" alt=""/>
                            </a>
                            <div class="mask">
                                <a href="#">
                                    <span class="glyphicon glyphicon-search"></span>
                                </a>
                                <h5>
                                    demo
                                </h5>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
        <div class="section section4">
            <h3 class="wow fadeInDown tittle">个人经历</h3>
            <div class="container">
                <p class="wow zoomIn exp_info">北京前潮宇睿科技有限公司(2015/07 -- 2017/01)<br>前端开发工程师</p>
                <div class="col-sm-6 col-xs-3 exp_left">
                    <h4 class="wow bounceIn" data-wow-delay=".3s">01</h4>
                </div>
                <div class="col-sm-6 col-xs-9 exp_right">
                    <h5 class="wow fadeInUp" data-wow-delay=".5s"><span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span>岗位职责</h5>
                    <p class="wow fadeInUp" data-wow-delay=".8s">根据产品方案和设计图，完成产品的web前端开发</p>
                </div>
                <div class="col-sm-6 col-xs-9 exp_left2">
                    <h5 class="wow fadeInUp" data-wow-delay=".5s">岗位职责<span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span></h5>
                    <p class="wow fadeInUp" data-wow-delay=".8s">根据工作安排高效、高质地完成代码编写，确保符合规范的前端代码</p>
                </div>
                <div class="col-sm-6 col-xs-3 exp_right2">
                    <h4 class="wow bounceIn" data-wow-delay=".3s">02</h4>
                </div>
                <div class="col-sm-6 col-xs-3 exp_left ">
                    <h4 class="wow bounceIn" data-wow-delay=".3s">03</h4>
                </div>
                <div class="col-sm-6 col-xs-9 exp_right">
                    <h5 class="wow fadeInUp" data-wow-delay=".5s"><span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span>岗位职责</h5>
                    <p class="wow fadeInUp" data-wow-delay=".8s">与设计团队紧密配合，能够实现设计师的设计想法</p>
                </div>
                <div class="col-sm-6 col-xs-9 exp_left2">
                    <h5 class="wow fadeInUp" data-wow-delay=".5s">岗位职责<span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span></h5>
                    <p class="wow fadeInUp" data-wow-delay=".8s">与后端开发团队紧密配合，确保代码有效对接，优化网站前端性能</p>
                </div>
                <div class="col-sm-6 col-xs-3 exp_right2">
                    <h4 class="wow bounceIn" data-wow-delay=".3s">04</h4>
                </div>
            </div>
        </div>
        <div class="section section5">
            <h3 class="wow fadeInDown tittle">联系方式</h3>
            <div class="container">
                <div class="section-title">
                    <p>非常感谢您的来访，期待您的来电！<br>您也可以把您的联系方式留下，我会及时与您取得联系</p>
                </div>
                <div class="row">
                    <div class="col-md-5 contact-left">
                        <ul class="con-info">
                            <li>
                                <i class="glyphicon glyphicon-phone"></i>
                                <span>Phone</span>
                                <p>177-8250-3516</p>
                            </li>
                            <li>
                                <i class="glyphicon glyphicon-envelope"></i>
                                <span>Email</span>
                                <p>fungzhanyang@163.com</p>
                            </li>
                            <li>
                                <i class="glyphicon glyphicon-map-marker"></i>
                                <span>Address</span>
                                <p>陕西省西安市</p>
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-7 contact-right">
                        <!-- Contact Form -->
                        <form action="my.php" id="contact-form" method="POST">

                            <input type="text" name="name" id="name" required="" placeholder="Your Name...">

                            <input type="email" name="email" id="email" required="" placeholder="Your Email...">

                            <div class="send-btn-div">
                                <textarea id="massage" name="massage" required="" placeholder="Your Massage..."></textarea>
                                <button type="submit" class="send-btn"><i class="glyphicon glyphicon-send"></i></button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<script src="./lib/jquery/jquery-1.12.2.min.js"></script>
<script src="./lib/bootstarp/js/bootstrap.min.js"></script>
<!--<script src="./lib/scrollreveal.js"></script>-->
<script src="./lib/wow.min.js"></script>
<script src="./js/index.js"></script>
<script src="./lib/particles/particles.js"></script>
<script src="./js/bgConfig.js"></script>

</body>
</html>